<template>
  <div>
    <client-only>
      <mavon-editor
        ref="mavonEditorRef"
        class="mavon-editor"
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
        v-model="poetText"
        @change="changeData"
        :toolbars="toolbars"
        :codeStyle="codeStyle"
        :ishljs="true"
      />
    </client-only>
  </div>
</template>

<script setup lang="ts">
import { upload as fileUpload, qiniuUpload } from "../../api/file";
const toolbars = {
  // toolbars: {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: true, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
};
const codeStyle = "monokai-sublime"; //主题
const mavonEditorRef = ref(); // 获取编辑器Vue实例子
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  htmlText: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:text", "update:htmlText"]);
const changeData = (value: string, render: string) => {
  // value中是文本值,render是渲染出的html文本
  emit("update:text", value);
  emit("update:htmlText", render);
};
const poetText = computed({
  get: () => props.text,
  set: (val) => {
    // emit("update:text", val);
    // poetText.value = val
  },
});
const $imgAdd = async (pos: any, $file: File) => {
  // 将文件存储到七牛云对象
  const res = (await qiniuUpload($file)) as { hash: string; url: string };
  // 第一步.将图片上传到服务器.
  // const formdata = new FormData();
  // formdata.append("file", $file);
  // const res = await fileUpload(formdata);
  // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
  /**
   * $vm 指为mavonEditor实例，可以通过如下两种方式获取
   * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
   * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
   */
  mavonEditorRef.value.$img2Url(pos, res.url);
  // axios({
  //   url: "server url",
  //   method: "post",
  //   data: formdata,
  //   headers: { "Content-Type": "multipart/form-data" },
  // }).then((url) => {
  //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
  //   /**
  //    * $vm 指为mavonEditor实例，可以通过如下两种方式获取
  //    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
  //    * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
  //    */
  //   $vm.$img2Url(pos, url);
  // });
};
const $imgDel = (pos: any, $file: string | Blob) => {
  // 第一步.将图片上传到服务器.
  var formdata = new FormData();
  formdata.append("image", $file);
  // axios({
  //   url: "server url",
  //   method: "post",
  //   data: formdata,
  //   headers: { "Content-Type": "multipart/form-data" },
  // }).then((url) => {
  //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
  //   /**
  //    * $vm 指为mavonEditor实例，可以通过如下两种方式获取
  //    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
  //    * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
  //    */
  //   $vm.$img2Url(pos, url);
  // });
};
</script>
<style lang="scss" scoped>
.mavon-editor {
  height: 100%;
}
</style>
